<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>报价单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="/page/fun/assist/tdesign.min.css">
    <script type="text/javascript" src="/resources/common/vue.global.prod.js"></script>
    <script type="text/javascript" src="/resources/common/axios.min.js"></script>
    <script type="text/javascript" src="/page/fun/assist/tdesign.min.js"></script>
    <style>
        body{margin:0;padding:0;}
        a{color:#03a;text-decoration:none;}
    </style>
</head>

<body>
<div id="app">
    <div>
        <t-cell-group>
            <t-cell style="background-image: linear-gradient(45deg, #0081ff, #1cbbb4);padding:25px 15px 5px;">
                <template #title><div style="font-size:18px; color: #ffffff;text-shadow: 1px 1px 2px #000;">{{model.title}}</div></template>
                <template #description>
                    <div style="color: #fffc;text-shadow: 1px 1px 2px #0005;">
                        <div v-for="t in model.description.split('\n')" style="text-indent:28px;padding-top:5px;">{{t}}</div>
                        <div style="padding-top:10px;text-align:right;">{{model.contact}} {{model.tel}}</div>
                        <div style="text-align:right;">{{model.address}}</div>
                    </div>
                </template>
            </t-cell>
        </t-cell-group>
        <t-sticky>
            <div style="background-image: linear-gradient(160deg, #0081ff, #1cbbb4);padding:8px 15px;margin-top:-1px;">
                <t-search placeholder="搜索商品名称" v-model:value="searchTxt" shape="round"></t-search>
            </div>
        </t-sticky>
        <t-cell-group v-for="(list,type) in typeMap" :title="type">
            <template v-for="item in list">
                <t-cell v-if="item.title.indexOf(searchTxt)>=0" style="padding:8px 15px;" @click="selectGoods[item.goods.oid].num=selectGoods[item.goods.oid].num?0:1;">
                    <template #left-icon>
                        <img v-if="item.indexTxt!='N'" :src="'page/fun/assist/'+item.indexTxt+'.png'" style="width:20px;height:20px;" />
                    </template>
                    <template #title>
                        <div :style="{color:item.color}" @click="loadGoods(item.oid,$event)">{{item.title}}</div>
                    </template>
                    <template #note>
                        <div style="min-width:90px;text-align:right;">
                            <span :style="{color:item.color,fontSize:'14px'}">{{item.priceTxt}}</span>
                            <span v-if="selectGoods[item.goods.oid].num" style="color:#090;padding-left:5px;">✔</span>
                        </div>
                    </template>
                </t-cell>
            </template>
        </t-cell-group>
        <t-popup v-model="showGoodsVisible" placement="bottom" style="max-height: 80%">
            <t-navbar :title="showGoods.name" :fixed="false">
                <template #right><div @click="showGoodsVisible=false;" style="color:#d30;">✖</div></template>
            </t-navbar>
            <div :style="{maxHeight:popHeight+'px',overflow:'auto'}" style="border-top: solid 1px #f3f3f3;border-bottom: solid 1px #f3f3f3;">
                <template v-if="showGoodsAttrList.length">
                    <t-cell-group v-for="item in showGoodsAttrList" :title="item.groupName">
                        <t-cell v-for="(attr,idx) in item.attrs" style="padding:8px 15px;">
                            <template #title>
                                <div :style="{color:'#0081ff'}">{{attr.name}}</div>
                            </template>
                            <template #description>
                                <div v-for="t in attr.value.split('\n')">{{t}}</div>
                            </template>
                        </t-cell>
                    </t-cell-group>
                </template>
                <div v-else style="text-align:center;line-height:100px;font-size:18px;color:#888;">暂未配置商品属性</div>
            </div>
            <div v-if="selectGoods[showGoods.oid]" style="padding:15px;text-align:right;">
                <div style="display: inline-block;border: solid 1.5px #0081ff;border-radius: 10px;">
                    <span @click="setSelectNum(showGoods.oid,-1)" style="font-size:20px;padding:0 3px;color:#0081ff;" >﹣</span>
                    <input type="number" v-model="selectGoods[showGoods.oid].num" style="font-size:18px;line-height:20px;width:40px;text-align:center;padding:0;border-width:0px;" />
                    <span @click="setSelectNum(showGoods.oid,1)" style="font-size:20px;padding:0 3px;color:#0081ff;" >﹢</span>
                </div>
            </div>
        </t-popup>
        <t-popup v-model="showOrderVisible" placement="bottom" style="max-height: 80%">
            <t-navbar title="需求订单" :fixed="false">
                <template #right><div @click="showOrderVisible=false;" style="color:#d30;">✖</div></template>
            </t-navbar>
            <div :style="{height:popHeight+'px',overflow:'auto'}">
                <template v-if="selectNum()>0">
                    <t-cell-group title="需求商品">
                        <template v-for="(list,type) in typeMap">
                            <template v-for="item in list">
                                <t-cell v-if="selectGoods[item.goods.oid].num" style="padding:8px 15px;">
                                    <template #left-icon>
                                        <img v-if="item.indexTxt!='N'" :src="'page/fun/assist/'+item.indexTxt+'.png'" style="width:20px;height:20px;" />
                                    </template>
                                    <template #title>
                                        <span :style="{color:item.color}">{{item.title}}</span> <span :style="{paddingLeft:'5px',color:item.color}">{{item.priceTxt}}</span>
                                    </template>
                                    <template #note>
                                        <div style="display: inline-block;border: solid 1.5px #0081ff;border-radius: 10px;width:95px;">
                                            <span @click="setSelectNum(item.goods.oid,-1)" style="font-size:20px;padding:0 3px;color:#0081ff;" >﹣</span>
                                            <input type="number" v-model="selectGoods[item.goods.oid].num" style="font-size:18px;line-height:20px;width:40px;text-align:center;padding:0;border-width:0px;" />
                                            <span @click="setSelectNum(item.goods.oid,1)" style="font-size:20px;padding:0 3px;color:#0081ff;" >﹢</span>
                                        </div>
                                    </template>
                                </t-cell>
                            </template>
                        </template>
                    </t-cell-group>
                </template>
                <div v-else style="text-align:center;padding:15px 0;color:#b00;">未选择需求商品，点击列表价格勾选。</div>
                <t-cell-group title="联系信息">
                    <t-radio-group v-model="askInfo.type" borderless style="display: flex;justify-content: flex-end;margin-top: -35px;height:35px;padding-right:15px;">
                        <t-radio :block="false" name="type" value="A" label="公司" style="background: transparent;"></t-radio>
                        <t-radio :block="false" name="type" value="B" label="个人" style="background: transparent;"></t-radio>
                    </t-radio-group>
                    <t-form>
                        <t-form-item v-if="askInfo.type=='A'" label="公司名称">
                            <t-input v-model="askInfo.name" borderless placeholder="请输入公司名称（必填）"></t-input>
                        </t-form-item>
                        <t-form-item label="联系人">
                            <t-input v-model="askInfo.dutyUser" borderless placeholder="请输入联系人（必填）"></t-input>
                        </t-form-item>
                        <t-form-item label="联系电话">
                            <t-input v-model="askInfo.tel" borderless placeholder="请输入联系电话（必填）"></t-input>
                        </t-form-item>
                        <t-form-item label="收货地址">
                            <t-input v-model="askInfo.address" borderless placeholder="请输入收货地址"></t-input>
                        </t-form-item>
                        <t-form-item label="需求备注">
                            <t-input v-model="askInfo.description" borderless placeholder="请输入需求备注"></t-input>
                        </t-form-item>
                        <div style="text-align:center;padding:15px 0;color:#b00;">提交需求后，请等待业务员联系或主动联系业务员。</div>
                    </t-form>
                </t-cell-group>
            </div>
            <div style="padding:15px;text-align:right;background:#f3f3f3;display:flex;justify-content:flex-end;">
                <div :style="{lineHeight:'40px',padding:'0 15px',color:msgColor}">{{submitMsg}}</div>
                <t-button theme="primary" @click="submitAsk">{{askInfo.oid?'确认修改需求':'提交需求'}}</t-button>
            </div>
        </t-popup>
        <div style="padding-bottom:75px;"></div>
    </div>
    <div style="padding:15px 15px 20px;background:rgb(236,236,236);position: fixed;bottom:0;width:100%;">
        <div style="font-size:12px;padding-bottom:6px;">{{appInfo.offerBottom1Txt}}</div>
        <a :href="appInfo.offerBottom2Link" style="font-size:12px;">{{appInfo.offerBottom2Txt}}</a>
    </div>
    <t-fab :text="selectNum()>0?('已选择'+selectNum()+'样商品'):'选择商品提交需求'" style="bottom:15px;right:16px;" @click="showOrderVisible=true;" />
</div>
<script>
var app=Vue.createApp({
    data:function(){
        return {
            model:param.model,
            appInfo:param.appInfo,
            typeMap:{},
            searchTxt:'',
            selectGoods:{},
            showGoods:{},
            showGoodsVisible:false,
            showOrder:{},
            showOrderVisible:false,
            popHeight:window.innerHeight*0.6,
            askInfo:{type:'A',name:'',dutyUser:'',tel:'',address:'',description:''},
            submitMsg:'',
            msgColor:''
        }
    },
    mounted() {
        document.title=this.model.title;
        this.askInfo.user=this.model.user;
        axios.post("action/fun/offerDetail/getList",{offerOid:this.model.oid})
        .then(function(response) {
            let data=response.data;
            if(data.code==0){
                for(let i=0;i<data.list.length;i++){
                    let v=data.list[i];
                    let arr=this.typeMap[v.goodsOffer.goods.storeType.name];
                    if(!arr){
                        arr=[];
                        this.typeMap[v.goodsOffer.goods.storeType.name]=arr;
                    }
                    let obj={
                        oid:v.goodsOffer.oid,
                        goods:{oid:v.goodsOffer.goods.oid},
                        title:v.goodsOffer.title||v.goodsOffer.goods.name,
                        color:v.goodsOffer.color,
                        indexTxt:v.goodsOffer.indexTxt,
                        priceTxt:v.goodsOffer.priceTxt||(v.goodsOffer.goods.offerPrice?(v.goodsOffer.goods.offerPrice+'元'):''),
                        num:0
                    };
                    arr.push(obj);
                    this.selectGoods[obj.goods.oid]=obj;
                }
            }
        }.bind(this));
    },
    methods:{
        loadGoods:function(oid,event){
            event.stopPropagation();
            axios.post("action/fun/goodsOffer/getGoods",{oid:oid})
            .then(function(response) {
                let data=response.data;
                if(data.code==0){
                    this.showGoods=data.goods;
                    this.showGoodsAttrList=JSON.parse(this.showGoods.attrJson);
                    this.showGoodsVisible=true;
                }
            }.bind(this));
            return false;
        },
        setSelectNum:function(goodsOid,addNum){
            if(this.selectGoods[goodsOid].num){
                this.selectGoods[goodsOid].num=parseInt(this.selectGoods[goodsOid].num)+addNum;
            }else{
                this.selectGoods[goodsOid].num=0+addNum;
            }
            if(this.selectGoods[goodsOid].num<0) this.selectGoods[goodsOid].num=0;
        },
        selectNum:function(){
            let num=0;
            for(let k in this.selectGoods){
                if(this.selectGoods[k].num) num++;
            }
            return num;
        },
        submitAsk:function(){
            let arr=[];
            for(let k in this.selectGoods){
                if(this.selectGoods[k].num>0){
                    arr.push(this.selectGoods[k]);
                }
            }
            this.msgColor='#f00';
            if(arr.length==0) this.submitMsg="请选择需求商品再提交";
            else if(this.askInfo.type=='A'&&!this.askInfo.name) this.submitMsg="请输入公司名称";
            else if(!this.askInfo.dutyUser) this.submitMsg="请输入联系人";
            else if(!this.askInfo.tel) this.submitMsg="请输入联系电话";
            else{
                axios.post("action/fun/askInfo/submit",{model:this.askInfo,details:arr})
                .then(function(response) {
                    let data=response.data;
                    if(data.code==0){
                        this.askInfo.oid=data.oid;
                        this.msgColor='#0a0';
                        this.submitMsg='提交成功，可再次提交可修改。';
                    }else{
                        this.submitMsg=data.msg;
                    }
                }.bind(this));
            }
        }
    }
}).use(TDesign);
let pv=app.mount('#app');
</script>
</body>
</html>